/*
 * @Description: 账单详情主要组件
 * @Author: tao.xie
 * @Date: 2019-03-18 15:59:10
 * @Last Modified by: tao.xie
 * @Last Modified time: 2019-03-21 17:14:32
 */

<template>
  <div class="flex-v flex-vc">
    <div class="wrapper flex-v flex-vc">
      <!-- 详情图标 -->
      <img
        :src="detailIcon"
        class="detail-icon"
      />
      <!-- 详情文字描述 -->
      <span class="detail-msg">{{detailMsg}}</span>
      <!-- 账单详情信息,维护一个自定义的数组 -->
      <div class="detail-info-wrapper">
        <consume-defail-info-row
          v-for="(info,index) in infoList"
          v-bind:key="index"
          :is-button=info.isButton
          :info-name="info.infoName"
          :info-value="info.infoValue"
          :is-info-value-stress="info.isInfoValueStress"
          :event-name="info.eventName"
          :center-msg="info.centerMsg"
        />
      </div>
    </div>
    <!-- 客服入口,如果有在线客服的配置则通过插件吊起客服,否则显示客服电话-->
    <div
      class="service-entry flex-h flex-vc"
      @click="service()"
    >
      <span class="flex1">对此订单有疑问</span>
      <span
        v-if="serviceTel != ''"
        class="service-tel"
      >{{serviceTel}}</span>
      <i class="baseColorNoAcitve icon iconfont icon-rightangel"></i>
    </div>
    <!-- 底部插槽 -->
    <slot name="bottom" />

  </div>
</template>
<script>
import ConsumeDetailInfoRow from './ConsumeDetailInfoRow'
export default {
  components: {
    'consume-defail-info-row': ConsumeDetailInfoRow
  },
  data() {
    return {
      serviceTel: ''
    }
  },
  mounted() {
    if (window.NEED_SERVICE) {
      this.serviceTel = ''
    } else {
      if (window.SERVICE_TEL) { this.serviceTel = window.SERVICE_TEL }
    }
  },
  methods: {
    service: function () {
      if (window.NEED_SERVICE) {
        // TODO 通过插件拉起客服插件
      } else {
        if (window.SERVICE_TEL) { window.location.href = 'tel:' + this.serviceTel }
      }
    }
  },
  props: {
    // 详情图标
    detailIcon: {
      type: String,
      default: '',
      required: true
    },
    // 详情文字说明
    detailMsg: {
      type: String,
      default: '',
      required: true
    },
    // 详情模型数组
    infoList: {
      type: Array,
      default: () => { return [] },
      required: true
    }
  }

}
</script>

<style scoped>
/*最外层包裹层*/
.wrapper {
  background-color: #fff;
  width: 750px;
}
/*图标*/
.detail-icon {
  width: 140px;
  height: 140px;
  margin-top: 60px;
  border-radius: 100%;
}
/*图标下的文字描述*/
.detail-msg {
  color: #333;
  font-size: 14px; /*no*/
  line-height: 20px; /*no*/
  margin-top: 20px;
}
/*多条账单信息包裹层*/
.detail-info-wrapper {
  margin-top: 66px;
}
/*客服包裹层*/
.service-entry {
  width: 750px;
  height: 90px;
  background: #fff;
  margin-top: 16px;
}
/*客服左边span*/
.service-entry > span:first-of-type {
  margin-left: 30px;
  color: #333;
  font-size: 14px; /*no*/
  line-height: 20px; /*no*/
}
/*客服电话*/
.service-tel {
  color: #999;
  font-size: 14px; /*no*/
  line-height: 20px; /*no*/
  margin-right: 20px;
}
/*客服右边箭头*/
.service-entry > i:first-of-type {
  margin-right: 30px;
}
</style>
